<template>
  <section class="wrap-img">
    <swiper :options="swiperOption">

      <swiper-slide v-for="(item,index) in swiperList" :key="index">
        <img class="swiper-img" :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </section>
</template>

<script>
    export default {
        name: "",
        data () {
          return {
            swiperOption: {
              pagination: {
                el: '.swiper-pagination'
              }
            },
            swiperList: [
              {
                id: '1',
                imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg_750x200_1f78af87.jpg'
              },
              {
                id: '2',
                imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/26c9b54e3e02d3724f614883d77a62c6.jpg_750x200_57aa8efa.jpg'
              },
              {
                id: '3',
                imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/d7bbc21db442366a882e04ddc984669a.jpg_750x200_85e640d9.jpg'
              }
            ]
          }
        }
    }
</script>

<style lang="stylus" scoped>
  .wrap-img >>> .swiper-pagination-bullet-active
    background-color: #FFF
  .wrap-img
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 26.7%
    .swiper-img
      width: 100%
</style>
